<template>
	<view>
		<view class="bank_name">
			<text class="pr10">提现账号</text>
			<text class="iconfont icon-alipay" style="color: #02A0E9;" />
			<text class="pl2">{{info.bank_number}}</text>
		</view>

		<view class="my-card">
			<view class="f14px">提现金额</view>

			<view class="amount-input am-border-b">
				<view class="f28px pr10">¥</view>
				<u-input v-model="amount" placeholder="" :custom-style="{fontSize: '72rpx',caretColor: '#03C75A'}"
					type="digit" @input="amountChange" />
			</view>

			<view class="f14px">
				<text v-if="errMsg" class="f-red">{{errMsg}}</text>
				<template v-else>
					<text>可提现金额：¥{{info.amount}}</text>
					<text @click="amount=Number(info.amount)" class="ml10" style="color:#3C69D1">全部提现</text>
				</template>
			</view>

			<view style="margin-top: 74rpx;">
				<u-button type="success" size="default" class="w-100" :disabled="disabled" :custom-style="{
					opacity: disabled ?0.7:1,
					height:'88rpx',
					lineHeight:'88rpx',
					background:'linear-gradient(270deg, #55E964 0%, #00AF4E 100%)'
			}" ripple @click="checkWithdraw">提现</u-button>
			</view>
		</view>
		<view class="text-center f-b f12px p-bottom">提现将收取{{this.rate}}的综合税费</view>

		<u-popup v-model="showPopup" mode="center" negative-top="250" width="622rpx" height="666rpx" border-radius="32"
			closeable close-icon="close-circle-fill" close-icon-color="#ddd" close-icon-size="40">
			<view style="height:616rpx" class="f16px flex flex-column align-center w-100">
				<view class="pt20 pb20">请输入提现密码</view>
				<view class="pb10">到账</view>
				<view class="flex align-center justify-center mb30">
					<text class="f26px pr5 inline-block" style="transform: translateY(-4rpx);">¥</text>
					<text class="f36px">{{finalAmount}}</text>
				</view>
				<view class="f14px mb5 flex w-100 align-center justify-between pl20 pr20 border-box">
					<text class="f-85">提现</text>
					<text>¥{{Number(amount).toFixed(2)}}</text>
				</view>
				<view class="f14px mb5 flex w-100 align-center justify-between pl20 pr20 border-box">
					<text class="f-85">综合税费</text>
					<text>{{rateAmount}}</text>
				</view>

				<view class="pt25">
					<u-message-input focus dot-fill active-color="#eee" inactive-color="#eee" :maxlength="6"
						:breathe="false" :value="password" disabled-keyboard></u-message-input>
				</view>

				<view class="f14px f-red pt10">{{errMsg2}}</view>
			</view>

		</u-popup>

		<u-keyboard mode="number" :tooltip="false" :mask="false" :dot-enabled="false" v-model="showPopup"
			@change="valChange" @backspace="backspace"></u-keyboard>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import * as Api from '@/api/assets/index.js'
	export default {
		data() {
			return {
				loading: false,
				info: {
					amount: 0,
					rate: 0,
				},
				amount: '', //提现金额
				errMsg: '', //金额错误
				showPopup: false,
				password: '',
				errMsg2: '', //密码错误
			};
		},
		computed: {
			disabled() {
				return this.amount == 0 ||
					this.amount == '' ||
					this.loading ||
					this.errMsg != ''
			},
			rate() { //税率
				const {
					rate = 0,
				} = this.info;
				return Number(rate * 100) + '%'
			},
			rateAmount() { //综合税费
				const {
					rate = 0,
				} = this.info;
				return '¥' + (Number(this.amount) * rate).toFixed(2)
			},
			finalAmount() { //到账金额
				const {
					rate = 0,
				} = this.info;
				return (Number(this.amount) * (1 - rate)).toFixed(2)
			},
		},
		methods: {
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.password += val;
				console.log(this.password);
				if (this.password.length == 6) {
					this.withdraw();
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.password.length) this.password = this.password.substr(0, this.password.length - 1);
				console.log(this.password);
			},
			async getData() {
				const res = await Api.home();
				this.info = res.data;
			},
			checkWithdraw() {
				const app = this;
				const {
					min_amount = 10,
						is_bind = 0,
				} = this.info;

				console.log(this.amount, min_amount);
				if (is_bind == 0) {
					uni.showModal({
						title: '温馨提示',
						content: '提现需先绑定支付宝',
						confirmText: '去绑卡',
						confirmColor: '#00AF4E',
						success(res) {
							if (res.confirm) {
								app.$navTo('pages/assets/withdraw/account', {
									is_first: 1
								})
							}
						}
					});
					return;
				}

				if (Number(this.amount) < Number(min_amount)) {
					this.$toast(`提现金额不能低于${min_amount}元`)
					return;
				}

				if (storage.get('frist-withdraw') != 0) {
					uni.showModal({
						title: '温馨提示',
						content: `提现将收取${this.rate}的综合税费`,
						confirmColor: '#00AF4E',
						success(res) {
							if (res.confirm) {
								app.showPopup = true;
								app.password = '';
							}
						}
					});
				} else {
					app.showPopup = true;
					app.password = '';
				}
			},
			async withdraw() {
				const app = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				console.log('withdraw');
				try {
					const res = await Api.withdraw({
						money: this.amount,
						pwd: this.password
					});
					if (res && res.data.id) {
						console.log(res);
						storage.set('frist-withdraw', 0);
						app.showPopup = false;
						setTimeout(() => {
							uni.hideLoading();
							app.$navTo('pages/assets/withdraw/detail', {
								id: res.data.id
							}, 'redirectTo')
						}, 500);
					}
				} catch (e) {
					app.errMsg2 = e.errMsg;
					app.password = '';
					uni.hideLoading();
				}
			},
			amountChange(val) {
				this.errMsg = '';
				if (Number(val) > Number(this.info.amount)) {
					this.errMsg = '输入金额超过可提现金额';
				}
			}
		},
		onShow() {
			this.getData();
		}
	}
</script>

<style lang="scss" scoped>
	.bank_name {
		height: 144rpx;
		font-size: 28rpx;
		color: #222222;
		padding: 0 76rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.my-card {
		width: 718rpx;
		min-height: 480rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto 20rpx;
		box-sizing: border-box;
		padding: 44rpx 48rpx 20rpx;
	}

	.amount-input {
		height: 96rpx;
		display: flex;
		position: relative;
		align-items: center;
		justify-content: flex-start;
		margin: 45rpx 12rpx 16rpx;
	}
</style>